<template>
  <div class="about">
    <a-carousel autoplay>
      <div v-for="item in listData" :key="item.id">
        <img style="width: 100%; height: 100%" :src="item.img" alt="banner" />
      </div>
    </a-carousel>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Banner",
  created() {
    axios
      .get("http://localhost:8866/user/banner/showImg", {
        headers: {
          Accept: "application/json",
        },
      })
      .then((res) => {
        console.log(res.data);
        this.listData = res.data.data;
      })
      .catch((error) => {
        console.error("请求失败:", error);
      });
  },
  data() {
    return {
      listData: [],
    };
  },
  mounted() {},
};
</script>

<style scoped>
.about {
  height: 100%;
}
.ant-carousel {
  height: 100%;
  width: 100%;
}
.ant-carousel >>> .slick-slide {
  height: 100%;
  background: #364d79;
  overflow: hidden;
}
.ant-carousel >>> div {
  height: 100%;
  width: 100%;
}
.ant-carousel >>> .slick-initialized {
  height: 100% !important;
}
.ant-carousel >>> .slick-list {
  height: 100%;
  /* border-radius: 10px 0 0 10px; */
  border-radius: 10px;
}
.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
